<!DOCTYPE html>
{% load static %}
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Feedback - DreamLife</title>
    <link rel="icon" type="image/x-icon" href="{% static 'img/icon.ico' %}">
    <style>
        /* CSS样式可以根据需要自行添加 */
        /* 页面居中显示 */
        body {
            background-image: url("{% static 'img/myimg.jpg' %}");
            background-size: cover;
            background-repeat: no-repeat;
            background-attachment: fixed; /* 保持背景图固定不随滚动而移动 */
            background-position: center;
            display: flex;
            justify-content: center;
            align-items: center;
            font-family: Arial, sans-serif;
        }
        /* 取消超链接的下划线并将初始字体颜色设置为黑色 */
        a {
            text-decoration: none;
            color: black;
            /* 其他样式 */
        }
        button a {
            text-decoration: none;
            color: black;
            border: 1px solid #555; /* 深灰色边框 */
            border-radius: 5px; /* 圆角边框 */
            padding: 5px 10px; /* 按钮内边距 */
            /* 其他样式 */
        }

        /* 点击后保持字体颜色为黑色 */
        a:visited {
            color: black; /* 设置点击后的字体颜色为黑色 */
        }
        /* 整体容器 */
        .super {
            {#简单实现一个居中盒子#}
            {#width: 200px;#}
            {#height: 200px;#}
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            background-color: transparent;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .container {
            width: 80%; /* 调整宽度 */
            background-color: rgba(255, 255, 255, 0.6); /* 设置背景色并调整透明度 */
            backdrop-filter: blur(10px); /* 添加毛玻璃效果 */
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            text-align: center; /* 居中文本 */
            {#height: 80vh; /* Adjust this value as needed */#}
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        button{
            margin: 0 10px 0 10px;
            padding: 10px 20px;
            background-color: #555;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        button:hover {
            background-color: #333;
        }

    </style>
</head>
<body>
    <div class="super">
        <div class="container">
            <h1>反馈页面</h1>
            <form method="POST" action="{% url 'submit_feedback' %}">
                {% csrf_token %}
                <label for="title">反馈标题：
                <input type="text" id="title" name="title"><br><br></label><br>

                <label for="name">姓名或称呼：
                <input type="text" id="name" name="name"><br><br></label><br>

                <label for="contact">联系方式：
                <input type="text" id="contact" name="contact"><br><br></label><br>

                <label for="content">具体内容：
                <textarea id="content" name="content" rows="1" cols="50"></textarea><br><br></label><br>

                <button type="submit">Submit</button>
                <button><a href="/index/">退出</a></button>
            </form>
        </div>
    </div>


</body>
</html>

